<template>
  <HModal okText="确定" cancelText="取消" :width="700"
           v-model="visible" title="明细表操作" @cancel="close" @ok="close">
    <a-table :pagination="false"
             size="middle" :dataSource="subForms" :columns="columns">
      <template slot="subFormTitle" slot-scope="text, record, index">
        {{ getSubFormTitle(record.subFormId) }}
      </template>

      <template slot="addRowTitle" slot-scope="text, record, index">
        <a-button size="small" shape="round" @click="toggle('addRow')">新建</a-button>
      </template>

      <template slot="addRowSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.addRow"
                    @click="() => record.addRow = !record.addRow"/>
      </template>

      <template slot="copyRowTitle" slot-scope="text, record, index">
        <a-button size="small" shape="round" @click="toggle('copyRow')">复制</a-button>
      </template>

      <template slot="copyRowSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.copyRow"
                    @click="() => record.copyRow = !record.copyRow"/>
      </template>

      <template slot="removeRowTitle" slot-scope="text, record, index">
        <a-button size="small" shape="round" @click="toggle('removeRow')">删除行</a-button>
      </template>

      <template slot="removeRowSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.removeRow"
                    @click="() => record.removeRow = !record.removeRow"/>
      </template>


      <template slot="clearRowTitle" slot-scope="text, record, index">
        <a-button size="small" shape="round" @click="toggle('clearRow')">删除全部</a-button>
      </template>

      <template slot="clearRowSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.clearRow"
                    @click="() => record.clearRow = !record.clearRow"/>
      </template>


      <template slot="moveUpTitle" slot-scope="text, record, index">
        <a-button size="small" shape="round" @click="toggle('moveUp')">上移</a-button>
      </template>

      <template slot="moveUpSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.moveUp"
                    @click="() => record.moveUp = !record.moveUp"/>
      </template>

      <template slot="moveDownTitle" slot-scope="text, record, index">
        <a-button size="small" shape="round" @click="toggle('moveDown')">下移</a-button>
      </template>

      <template slot="moveDownSlot" slot-scope="text, record, index">
        <a-checkbox :checked="record.moveDown"
                    @click="() => record.moveDown = !record.moveDown"/>
      </template>

      <template slot="conditionSlot" slot-scope="text, record, index">
        <div style="user-select: none">
          [<a @click="() => openSubFormAuthConditionConfig(record)">条件</a>]
          <span class="iconfont condition-icon" v-show="hasFormulas(record, formDefinition)">&#xe806;</span>
        </div>
      </template>
    </a-table>

    <SubFormAuthConditionConfig :action="action" :formDefinition="formDefinition" ref="SubFormAuthConditionConfig"/>
  </HModal>
</template>
<script>
import {createProps} from '@/utils';
import HModal from '@comp/hhd/HModal/HModal.vue';
import SubFormAuthConditionConfig from '@comp/hhd/design/FormAction/SubFormAuthConditionConfig.vue';
import { createFormDefinition } from '@comp/hhd/design/FormDesigner/types'

export default {
  name: 'SubFormAction',
  components: {
    SubFormAuthConditionConfig,
    HModal
  },
  props: {
    subForms: createProps(Array),
    action: createProps(Object, () => undefined),
    formDefinition: createProps(Object, createFormDefinition),
  },
  data() {
    return {
      columns,
      visible: false,
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    hasFormulas(subFormAction, formDefinition) {
      if (!formDefinition || !formDefinition.subFormAuthFormulas) {
        formDefinition && this.$set(formDefinition, 'subFormAuthFormulas', [])
        return undefined;
      }
      let list = formDefinition.subFormAuthFormulas.filter(subFormAuthFormula => subFormAuthFormula.subFormId === subFormAction.subFormId && subFormAuthFormula.actionId === subFormAction.actionId);
      return list && list.length;
    },
    toggle(property) {
      let flag = false, list = this.subForms || [], first = true;
      if (!list || !list.length) return;
      first = list[0][property];
      list.forEach(action => flag = flag || (first ^ action[property]));
      first = !first
      if (flag) first = true;

      list.forEach(action => action[property] = first);
    },
    openSubFormAuthConditionConfig(subFormAction) {
      let dataSource = this.formDefinition.subFormAuthFormulas || []
      dataSource = dataSource.filter(f => f.subFormId === subFormAction.subFormId && f.actionId === this.action.id)
      this.$refs.SubFormAuthConditionConfig.setData({dataSource, subFormAction});
    },
    getSubFormTitle(formId) {
      if (!this.formDefinition
          || !this.formDefinition.subForms
          || !this.formDefinition.subForms.length)
        return undefined;

      let subForm = this.formDefinition.subForms.find(s => s.id === formId);
      return subForm && subForm.formName || undefined;
    },
  }
};

const columns = [
  {
    title: '明细表名称',
    scopedSlots: {
      customRender: 'subFormTitle'
    },
  },
  {
    scopedSlots: {
      title: 'addRowTitle',
      customRender: 'addRowSlot'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'copyRowTitle',
      customRender: 'copyRowSlot'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'removeRowTitle',
      customRender: 'removeRowSlot'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'clearRowTitle',
      customRender: 'clearRowSlot'
    },
    align: 'center'
  },

  {
    scopedSlots: {
      title: 'moveUpTitle',
      customRender: 'moveUpSlot'
    },
    align: 'center'
  },
  {
    scopedSlots: {
      title: 'moveDownTitle',
      customRender: 'moveDownSlot'
    },
    align: 'center'
  },
  {
    title: '条件配置',
    scopedSlots: {
      customRender: 'conditionSlot'
    },
    align: 'center'
  },
];
</script>
<style>
.condition-icon .iconfont {
  font-size: 12px;
}

.condition-icon {
  padding-top: 2px;
  display: inline-flex;
  width: 15px;
  height: 15px;
  font-size: 12px !important;
  border-radius: 15px;
  background: #41c400;
  color: white !important;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}
</style>